<template>
	<view>
		<ker-top-roll-tabs class="top-tabs" ref="topTabs" :tabList="tabList" @changeCurrent="currentIndex" :current="current"></ker-top-roll-tabs>
		<slot></slot>
	</view>
</template>
<script>
import kerTopRollTabs from '../../components/ker-top-roll-tabs/ker-top-roll-tabs.vue';
export default {
	data() {
		return {
			current:0,	//当前索引
			stopscroll: 0, //停止滑动距离
			scrollTop:0,	//滑动距离
			timer:null,	//定时器
			toView:null,
		};
	},
	components: {
		kerTopRollTabs
	},
	props:{
		tabList:{	//列表
			type:Array,
			default:function (){
				return []
			}
		}
	},
	watch:{
		
	},
	methods: {
		currentIndex(index){
			this.current = index
			this.toView = `item${index}`
			this.$emit('current',index)
			// const tabsId = document.querySelector(`#tab${index}`);
			// // 判断进行平滑滚动
			// if (tabsId) {
			//   window.scrollTo({
			// 	top: tabsId.offsetTop,
			// 	behavior: "smooth",
			//   });
			// }
		},
		pageScroll(e){	//监听滑动
			clearTimeout(this.timer);//清除定時器
		    this.timer = setTimeout(this.ScrollEnd, 500);
			this.scrollTop = e.detail.scrollTop;
		},
		 ScrollEnd() {
			console.log("滚动已结束");
			this.updataTab()
		},
		updataTab(){	//更新tab
			this.$nextTick(function(){
				let contentItem = document.getElementsByClassName('anchor-content-item');
				contentItem.forEach((item,index) => {
					if(this.scrollTop >= contentItem[index].offsetTop){
						this.current = index
					}
				})
			})
		},
	},
	mounted() {
		
	},
};
</script>
<style lang="scss" scoped>
	
	.top-tabs{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;
		background-color: #FFF;
	}
	.anchor-tabs-list{
		position: fixed;
		top: 85px;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.content{
		height: 300px;
		background: #ccc;
		margin-bottom: 10px;
	}
</style>
